<template>
  <div class="page-content">
    <binTable
      :tableColumnProps="tableColumnProps"
      :listData="pageList"
      :listCount="pageListCount"
      v-model:page="pageInfo"
    >
      <!-- 课程名称 -->
      <template #cname="scope">
        <el-link @click="handleShowDetail(scope)"> {{ scope.row.cname }} </el-link>
      </template>
      <!-- 课程类型 -->
      <template #type="scope">
        <el-tag :type="scope.row.type === 1 ? 'warning' : ''">
          {{ scope.row.type === 1 ? '主修' : '选修' }}
        </el-tag>
      </template>
      <!-- 选课限制 -->
      <template #choose_limit="scope">
        <el-tag
          effect="plain"
          :type="
            scope.row.choose_limit === 1 ? 'warning' : scope.row.choose_limit === 2 ? 'success' : ''
          "
        >
          {{
            scope.row.choose_limit === 1
              ? '同院系'
              : scope.row.choose_limit === 2
              ? '同专业'
              : '无限制'
          }}
        </el-tag>
      </template>
      <!-- 课程状态 -->
      <template #state="scope">
        <el-switch
          v-model="scope.row.state"
          style="--el-switch-off-color: #ff4949"
          class="ml-2"
          inline-prompt
          active-text="启"
          inactive-text="禁"
          @change="handleSwitch(scope.row)"
        />
      </template>
      <!-- 操作按钮 -->
      <template #handle="scope">
        <el-button link type="primary" :icon="DeleteFilled" @click="handleChooseClick(scope.row)">
          退课
        </el-button>
      </template>
    </binTable>
    <!-- 课程详细信息对话框 -->
    <el-dialog v-model="detailDialog" title="课程详情" width="35%">
      <div class="userDetail">
        <div class="info">
          <p>课程名称：{{ courseDetail.course_name }}</p>
          <p>授课教师：{{ courseDetail.teacher_name }}</p>
          <p>
            课程学分：<span style="color: red">{{ courseDetail.credit }}</span>
          </p>
          课程类型：
          <el-tag :type="courseDetail.type === 1 ? 'warning' : ''">
            {{ courseDetail.type === 1 ? '主修' : '选修' }}
          </el-tag>
          <!-- <p>课程类型：{{ courseDetail.type === 1 ? '主修' : '选修' }}</p> -->
          <p>上课时间1：{{ numToClassTime(courseDetail.time_1) }}</p>
          <p>上课时间2：{{ numToClassTime(courseDetail.time_2) }}</p>
          <p>上课地点：{{ courseDetail.location }}</p>
          <p>所属专业：{{ courseDetail.major_name }}</p>
          <p>所属学院：{{ courseDetail.college_name }}</p>
          <p>课程学时：{{ courseDetail.lesson_period }}</p>
          课程限制：
          <el-tag
            effect="plain"
            :type="
              courseDetail.choose_limit === 1
                ? 'warning'
                : courseDetail.choose_limit === 2
                ? 'success'
                : ''
            "
          >
            {{
              courseDetail.choose_limit === 1
                ? '同院系'
                : courseDetail.choose_limit === 2
                ? '同专业'
                : '无限制'
            }}
          </el-tag>
          <p>人数限制：{{ courseDetail.num_limit }}</p>
          <p>剩余可选人数：{{ courseDetail.remaining }}</p>
          课程状态：
          <el-tag :type="courseDetail.state ? 'success' : 'danger'">
            {{ courseDetail.state ? '已开放' : '未开放' }}
          </el-tag>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailDialog = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { DeleteFilled } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import binTable from '@/base-ui/table'
import { binMsg } from '@/global/api.js'
import { numToClassTime } from '@/utils/utils.js'
import { findById } from '@/services/course.js'

const props = defineProps({
  // table 的配置文件
  tableColumnProps: {
    type: Object,
    required: true
  },
  // 当前页面所属
  pageName: {
    type: String,
    required: true
  },
  moduleName: {
    type: String,
    required: true
  }
})

const store = useStore()
const detailDialog = ref(false)
const courseDetail = ref({}) // 课程详细信息

// 转递给 table 组件的分页数据
const pageInfo = ref({
  page_num: 1,
  page_size: 10
})
const emit = defineEmits(['pageInfoChange', 'handleChooseClick'])

// 当页数发生变化，就通知父组件查询数据
watch(
  () => pageInfo.value,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 数据列表
// const pageList = computed(() => store.getters[`${props.moduleName}/pageList`](props.pageName))
const pageList = computed(() => store.state[props.moduleName].caseList)

// 数据列表数量
// const pageListCount = computed(() => store.getters[`${props.moduleName}/pageCount`](props.pageName))
const pageListCount = computed(() => store.state[props.moduleName].caseCount)

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  binMsg().closeAll()
  // 查找列表数据
  store.dispatch(`${props.moduleName}/searchCaseAction`, {
    pageName: props.pageName,
    ...formValue,
    ...pageInfo
  })
}

// 点击选择，发出事件给父组件
const handleChooseClick = async (row) => {
  emit('handleChooseClick', { id: row.id, cid: row.cid, type: row.type })
}

// 显示课程详细信息
const handleShowDetail = async (scope) => {
  // 根据课程ide，获取对应的课程
  const { data: res } = await findById(scope.row.cid)
  courseDetail.value = res.data.data
  detailDialog.value = true

}

defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.userDetail {
  .avatar {
    margin-top: 15px;
  }
  .info {
    font-size: 16px;
    margin-left: 50px;
  }
}
</style>
